<template>
  <div>
    <!-- 作业信息 -->
    <div class="course-info">
      <h2>作业详情 - {{ homework.name }}</h2>
      <el-card header="作业信息">
        <div>
          <el-row>
            <el-col :span="6">课程序号: {{ homework.courseId }}</el-col>
            <el-col :span="6">授课教师: {{ homework.teacherId }}</el-col>
          </el-row>
        </div>
        <div>
          <el-row>
            <el-col :span="6">发布日期: {{ homework.startTime }}</el-col>
            <el-col :span="6">截止日期: {{ homework.endTime }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">互评开始日期: {{ homework.hupingStartTime }}</el-col>
            <el-col :span="6">互评截止日期: {{ homework.hupingEndTime }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">作业总分：{{ totalGrade.scoreTotal }}</el-col>
            <el-col :span="6">评语：{{ totalGrade.comment }}</el-col>
          </el-row>
        </div>
        <div class="course-profile">
          <el-divider></el-divider>
          <h3>作业详细说明</h3>
          <p>{{ homework.profile }}</p>
        </div>
      </el-card>
      <div><el-card>
        <h3>作业</h3>
        <el-button :span="6" type="primary" @click="handleOnline">代码作业评测</el-button>
      </el-card></div>
      <h2>成绩统计</h2>
      <el-tabs type="border-card">
      <el-tab-pane label="饼状图">
        <div id="pieChart" style="width: 600px; height: 400px"></div>
      </el-tab-pane>
      <el-tab-pane label="柱状图">
        <div id="barChart" style="width: 600px; height: 400px"></div>
      </el-tab-pane>
    </el-tabs>
      <h2>优秀作业展示</h2>
      <div><el-card>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="ID" prop="studentId" width="150"></el-table-column>
          <el-table-column label="姓名" prop="name" width="150"></el-table-column>
          <el-table-column label="总分" prop="scoreTotal" width="150"></el-table-column>
          <el-table-column prop="content" width="150" v-if="false"></el-table-column>
          <el-table-column prop="file" width="150" v-if="false"></el-table-column>
          <el-table-column label="详情">
                <template v-slot="scope">
                <el-button @click="handleDetail(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background="true"
            layout="prev, pager, next"
            :total="total"
            v-model:currentPage="queryInfo.page"
            :page-size="queryInfo.size"
            @current-change="handlePageChange"
        />
      </el-card></div>
    </div>
    <el-dialog
            title="优秀作业"
            v-model="exceDialogVisible"
            >
            <el-form :model="exceHomework" label-width="140px">
                <el-form-item label="学号">
                <el-text>{{ exceHomework.studentId }}</el-text>
                </el-form-item>
                <el-form-item label="姓名">
                <el-text>{{ exceHomework.name }}</el-text>
                </el-form-item>
                <el-form-item label="答案">
                <el-text>{{ exceHomework.content }}</el-text>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action=""
                  :file-list="List"
                  :auto-upload="false">
                </el-upload>
                </el-form-item>
                <el-form-item label="总得分">
                  <el-text>{{ exceHomework.score }}</el-text>
                </el-form-item>
            </el-form>
          </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getHomework } from '@/api/homeworkTeacher'
import { getStudentHomework } from '@/api/homeworkStudent'
import { getExcellentHomework } from '@/api/getExcellentHomework'
import { getGradeStatic } from '@/api/getGradeStatic'

import * as echarts from 'echarts'

const router = useRouter()
const route = useRoute()
const upload = ref(null)

const homework = ref({
  homeworkId: '',
  teacherId: '',
  courseId: '',
  name: '',
  startTime: '',
  endTime: '',
  hupingStartTime: '',
  hupingEndTime: '',
  profile: ''
})

const homeworkCommit = ref({
  gradeId: 0,
  content: '',
  status: 0
})

const gradeRequest = {
  homeworkId: route.params.homeworkId
}

const gradeStatistic = ref({
  gradeStatisticA: 0,
  gradeStatisticB: 0,
  gradeStatisticC: 0,
  gradeStatisticD: 0,
  gradeStatisticNotSubmit: 0,
  gradeStatisticSubmit: 0
})

const getStatic = async () => {
  const res = await getGradeStatic(gradeRequest)
  gradeStatistic.value = res.data.data
}

const totalGrade = ref({
  scoreTotal: '',
  comment: ''
})

const total = ref(0)
const tableData = ref([])
const currentPage = ref(1)

const exceDialogVisible = ref(false)

const queryInfo = ref({
  homeworkId: route.params.homeworkId,
  page: currentPage,
  size: 10
})

const getExcellent = async () => {
  const res = await getExcellentHomework(queryInfo.value)
  tableData.value = res.data.data.rows
  total.value = res.data.data.total
}

const handleDetail = (row) => {
  exceDialogVisible.value = true
  exceHomework.value.studentId = row.studentId
  exceHomework.value.name = row.name
  exceHomework.value.content = row.content
  exceHomework.value.score = row.scoreTotal
}

const handlePageChange = () => {
  getExcellent()
}

const exceHomework = ref({
  studentId: '',
  name: '',
  content: '',
  score: 0
})

const getDetail = async () => {
  const res = await getHomework(gradeRequest)
  const resStu = await getStudentHomework(gradeRequest)
  homework.value.courseId = res.data.data.courseId
  homework.value.endTime = res.data.data.endTime
  homework.value.homeworkId = res.data.data.homeworkId
  homework.value.name = res.data.data.name
  homework.value.profile = res.data.data.profile
  homework.value.startTime = res.data.data.startTime
  homework.value.teacherId = res.data.data.teacherId
  totalGrade.value.comment = resStu.data.data.comment
  totalGrade.value.scoreTotal = resStu.data.data.scoreTotal
  fileList.value = resStu.data.data.file.map(item => ({
    name: item.fileName,
    url: item.url
  }))
  homeworkCommit.value.gradeId = resStu.data.data.gradeId
  homeworkCommit.value.content = resStu.data.data.content
  homeworkCommit.value.status = resStu.data.data.status
}

const handleOnline = () => {
  router.push({ name: 'onlineJudge', params: { homeworkId: route.params.homeworkId, gradeId: homeworkCommit.value.gradeId } })
}

const fileList = ref([])

const generatePieChart = () => {
  const chart = echarts.init(document.getElementById('pieChart'))

  const option = {
    title: {
      text: '成绩分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      data: ['优秀', '良好', '中等', '及格', '不及格']
    },
    series: [
      {
        name: '成绩分布',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: gradeStatistic.value.gradeStatisticA, name: '优秀' },
          { value: gradeStatistic.value.gradeStatisticB, name: '良好' },
          { value: gradeStatistic.value.gradeStatisticC, name: '中等' },
          { value: gradeStatistic.value.gradeStatisticD, name: '及格' },
          { value: gradeStatistic.value.gradeStatisticNotSubmit, name: '不及格' }
        ]
      }
    ]
  }

  chart.setOption(option)
}

const generateBarChart = () => {
  const chart = echarts.init(document.getElementById('barChart'))

  const option = {
    title: {
      text: '成绩分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: ['优秀', '良好', '中等', '及格', '不及格']
    },
    yAxis: {
      type: 'value',
      minInterval: 1
    },
    series: [
      {
        name: '人数',
        type: 'bar',
        data: [gradeStatistic.value.gradeStatisticA, gradeStatistic.value.gradeStatisticB, gradeStatistic.value.gradeStatisticC, gradeStatistic.value.gradeStatisticD, gradeStatistic.value.gradeStatisticNotSubmit]
      }
    ]
  }

  chart.setOption(option)
}

onMounted(() => {
  getStatic().then(() => {
    generateBarChart()
    generatePieChart()
  })
})
onMounted(getDetail)
onMounted(getStatic)
onMounted(getExcellent)
</script>

<style scoped>
.course-info {
  margin-bottom: 20px;
}

.course-info span {
  margin-right: 10px;
}

.course-description {
  margin-top: 10px;
}

.student-list {
  margin-top: 20px;
}

table {
  width: 100%;
}

th, td {
  text-align: center;
  padding: 5px;
  border: 1px solid #ccc;
}

th {
  background-color: #f0f0f0;
}
</style>
